<x-admin.admin :modules="$modules" :active-module="$activeModule" :title="$title" :active-menu="$activeMenu">
    @fragment('content')
        <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
            <!-- 页面标题和操作按钮 -->
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-white">用户管理</h2>
                <div class="flex space-x-2">
                    <a class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                       href="{{route('admin.user.create')}}"
                       hx-get="{{route('admin.user.create')}}"
                            hx-target="#modal-body"
                            hx-swap="innerHTML"
                            hx-push-url="false"
                            data-open-model="true"
                            x-data
                            x-init="
                                document.body.addEventListener('htmx:afterOnLoad', (event) => {
                                    if(event.srcElement.dataset.openModel==='true') {
                                        $dispatch('open-modal')
                                    }
                                })
                              ">
                        <span class="flex items-center">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                            </svg>
                            添加用户
                        </span>
                    </a>
                </div>
            </div>

            <!-- 搜索和筛选 -->
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700">
                <form class="flex flex-col md:flex-row gap-4">
                    <div class="flex-1">
                        <label for="search" class="sr-only">搜索</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                    <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
                                </svg>
                            </div>
                            <input type="text" name="search" id="search" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white dark:bg-gray-800 dark:border-gray-600 dark:text-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="搜索用户名或邮箱">
                        </div>
                    </div>
                    <!-- <div class="w-full md:w-48">
                        <label for="role" class="sr-only">角色</label>
                        <select id="role" name="role" class="block w-full py-2 px-3 border border-gray-300 bg-white dark:bg-gray-800 dark:border-gray-600 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                            <option value="">所有角色</option>
                            <option value="administrator">管理员</option>
                            <option value="user">普通用户</option>
                        </select>
                    </div> -->
                    <div>
                        <button type="submit" class="w-full inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                            筛选
                        </button>
                    </div>
                </form>
            </div>

            <!-- 用户列表 -->
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                    <thead class="bg-gray-50 dark:bg-gray-700">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">ID</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">用户名</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">邮箱</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">角色</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">注册时间</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">状态</th>
                            <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">操作</th>
                        </tr>
                    </thead>
                    <tbody id="table-body" class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                        @forelse($users as $user)
                        @include('admin.user.list-item')
                        @empty
                            <tr>
                                <td colspan="7" class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400 text-center">暂无用户数据</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <!-- 分页 -->
            <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700">
                {{ $users->links() }}
            </div>
        </div>
        <!-- 模态框容器 -->
        <div
            x-cloak
            x-data="{ show: false }"
            x-show="show"
            x-transition
            @open-modal.window="show = true"
            @close-modal.window="show = false"
            class="fixed inset-0 bg-black/50 dark:bg-gray-900/70 flex items-center justify-center z-50"
        >
            <div class="bg-white dark:bg-gray-800 p-4 rounded shadow-xl max-w-md w-full mx-4" x-ref="modalContent">
                <!-- 模态框内容通过 HTMX 加载 -->
                <div id="modal-body" class="text-gray-800 dark:text-gray-200"></div>
            </div>
        </div>
    @endfragment

    <x-admin.table-scripts />
</x-admin.admin>
